<template>
  <div class="center-box">
    <div class="header-box">
      <!--头部-->
      <div>
        <i><img :src="userInfo.img"  mode="widthFix" alt=""></i>
        <p>{{userInfo.name}}</p>
      </div>
    </div>
    <div class="list-box">
      <ul>
        <li>
          <navigator url="">
            <i><img src="../../../static/images/icon-center-order-t.png" alt="" mode="widthFix"></i>
            <span>门票订单</span>
          </navigator>
        </li>
        <li>
          <navigator url="">
            <i><img src="../../../static/images/icon-center-order-h.png" alt="" mode="widthFix"></i>
            <span>酒店订单</span>
          </navigator>
        </li>
        <li>
          <navigator url="">
            <i><img src="../../../static/images/icon-center-order-s.png" alt="" mode="widthFix"></i>
            <span>商品订单</span>
          </navigator>
        </li>
      </ul>
      <ul>
        <li>
          <navigator url="/pages/center/opinion/main">
            <i><img src="../../../static/images/icon-center-opinion.png" alt="" mode="widthFix"></i>
            <span>意见反馈</span>
          </navigator>
        </li>
      </ul>
      <ul>
        <li>
          <navigator url="/pages/center/address/main">
            <i><img src="../../../static/images/icon-center-address.png" alt="" mode="widthFix"></i>
            <span>收货地址</span>
          </navigator>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>


export default {
  data(){
    return {
      userInfo:{
        img:'http://thirdwx.qlogo.cn/mmopen/vi_32/Q0j4TwGTfTJvcRnHSN6qoiaID7pghx4A7DHqC5iba4bC0YHAqibiaTtW08hK6HK9muX9eKL4H2ibibrnpZWGqic6ZsIaQ/132',
        name:'微信名称'
      }
    }
  },
  computed: {

  },
  methods: {
    test() {
      console.log("aaa")
    }
  }
}
</script>


<style scoped lang="scss">
  .center-box {
    .header-box{
      div {
        display: flex;
        align-items: center;
        width: 100%;
        padding: 48rpx 35rpx 52rpx;
        overflow: hidden;
        i {
          width: 20vw;
          height: 20vw;
          margin-right: 18rpx;
          border-radius: 50%;
          overflow: hidden;
        }
        p{
          flex: 1;
          padding: 0 30rpx;
          overflow: hidden;
          color: #161616;
          font-size: 40rpx;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
      }
    }
    .list-box {
      padding: 0 30rpx;
      ul {
        margin-bottom: 20rpx;
        background-color: #fff;
        border-radius: 10rpx;
        li {
          width: 100%;
          overflow: hidden;
          &:last-child {
            navigator {
              &::before {
                background-color: #fff;
              }
            }
          }
          navigator{
            position: relative;
            display: flex;
            align-items: center;
            width: 94%;
            height: 110rpx;
            padding: 0 40rpx 0 30rpx;
            margin: 0 auto;
            font-size: 30rpx;
            &::before {
              content: "";
              position: absolute;
              left: 30rpx;
              right: 40rpx;
              bottom: 0;
              height: 1px;
              background-color: #F0F1F2;
            }
          }
          i {
            width: 36rpx;
            margin-right:30rpx;
          }
        }
      }
    }
  }
</style>
